<template>
	<com-page class="com-spacing com-color-content-bg page-container">
		<!-- 顶部导航 -->
		<view class="header">
			<view class="header-left" @click="onBack">
				<com-icon name="arrow-left" color="#333" size="20" />
			</view>
			<view class="header-center">
				<text class="header-title">{{ currentEvent.themeTitle || '赛事详情' }}</text>
			</view>
			<view class="header-right">
				<text class="progress-text">{{ currentIndex + 1 }}/{{ events.length }}</text>
			</view>
		</view>

		<!-- 进度指示器 -->
		<view class="progress-container">
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: progressWidth + '%' }"/>
			</view>
			<view class="progress-dots">
				<view 
					v-for="(item, index) in events" 
					:key="index"
					class="progress-dot"
					:class="{ active: index <= currentIndex }"
				/>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-container">
			<scroll-view class="scroll-content" scroll-y>
				<!-- 活动图片 -->
				<view v-if="currentEvent.activityImage" class="activity-image-container">
					<image 
						:src="currentEvent.activityImage" 
						class="activity-image" 
						mode="aspectFill"
					/>
				</view>

				<!-- 标题区域 -->
				<view class="title-section">
					<view v-if="currentEvent.icon" class="title-icon">
						<image :src="currentEvent.icon" class="icon-image" mode="aspectFit" />
					</view>
					<text class="content-title">{{ currentEvent.themeTitle }}</text>
				</view>

				<!-- HTML内容展示 -->
				<view class="content-section">
					<rich-text 
						:nodes="processedContent" 
						class="rich-content"
					/>
				</view>
			</scroll-view>
		</view>

		<!-- 底部操作区 -->
		<view class="footer-actions">
			<view class="action-buttons">
				<button 
					v-if="currentIndex > 0"
					class="btn btn-secondary" 
					@click="onPrevious"
				>
					上一步
				</button>
				
				<button 
					v-if="currentIndex < events.length - 1"
					class="btn btn-primary" 
					@click="onNext"
				>
					下一步
				</button>
				
				<button 
					v-if="currentIndex === events.length - 1"
					class="btn btn-primary btn-finish" 
					@click="onStartApply"
				>
					下一步
				</button>
			</view>
		</view>
	</com-page>
</template>

<script>
	export default {
		name: 'EventApply',
		data() {
			return {
				currentIndex: 0,
				events: []  // 将从首页或API获取数据
			}
		},
		computed: {
			currentEvent() {
				return this.events[this.currentIndex] || {}
			},
			progressWidth() {
				return ((this.currentIndex + 1) / this.events.length) * 100
			},
			processedContent() {
				if (!this.currentEvent.themeContent) return ''
				
				// 处理HTML内容，添加样式
				let content = this.currentEvent.themeContent
				
				// 为表格添加样式类
				content = content.replace(/<table>/g, '<table class="content-table">')
				
				// 为段落添加样式
				content = content.replace(/<p>/g, '<p class="content-paragraph">')
				
				return content
			}
		},
		methods: {
			onBack() {
				this.$utils.router({ type: 'back' })
			},
			
			onPrevious() {
				if (this.currentIndex > 0) {
					this.currentIndex--
				}
			},
			
			onNext() {
				if (this.currentIndex < this.events.length - 1) {
					this.currentIndex++
				}
			},
			
			onStartApply() {
				// 直接跳转到用户信息页面
				uni.navigateTo({
					url: '/pages/user/info/info?fromApply=true'
				})
			},
			
			async loadEventDetails(evtId) {
				try {
					// 这里应该调用API获取赛事详情
					// const eventDetails = await this.$api.event.getDetails(evtId)
					// this.events = eventDetails
					
					// 暂时使用示例数据
					console.log('加载赛事详情:', evtId)
				} catch (error) {
					uni.showToast({
						title: this.$t('pages_category_category_msg_866b795e'),
						icon: 'none'
					})
				}
			}
		},
		
		onLoad(options) {
			// 从本地缓存获取events数据
			const cachedEvents = uni.getStorageSync('tempEvents');
			if (cachedEvents && cachedEvents.length > 0) {
				this.events = cachedEvents;
				console.log('从缓存获取到events数据:', this.events);
				// 使用完后清理缓存
				uni.removeStorageSync('tempEvents');
			} else if (options.evtId) {
				// 如果没有缓存数据，则调用API获取
				this.loadEventDetails(options.evtId);
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;
		padding-bottom: 136rpx; /* 底部按钮高度 + padding */
	}
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
		
		.header-left,
		.header-right {
			width: 120rpx;
		}
		
		.header-right {
			text-align: right;
		}
		
		.header-center {
			flex: 1;
			text-align: center;
		}
		
		.header-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
		
		.progress-text {
			font-size: 28rpx;
			color: #007aff;
		}
	}
	
	.progress-container {
		padding: 24rpx;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
		
		.progress-bar {
			height: 6rpx;
			background: #f0f0f0;
			border-radius: 3rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			
			.progress-fill {
				height: 100%;
				background: #007aff;
				border-radius: 3rpx;
				transition: width 0.3s ease;
			}
		}
		
		.progress-dots {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.progress-dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 8rpx;
				background: #f0f0f0;
				transition: background-color 0.3s ease;
				
				&.active {
					background: #007aff;
				}
			}
		}
	}
	
	.content-container {
		flex: 1;
		background: #fff;
		overflow: hidden;
		
		.scroll-content {
			height: 100%;
		}
	}
	
	.activity-image-container {
		width: 100%;
		
		.activity-image {
			width: 100%;
			height: 400rpx;
		}
	}
	
	.title-section {
		display: flex;
		align-items: center;
		padding: 32rpx 24rpx 16rpx;
		
		.title-icon {
			margin-right: 16rpx;
			
			.icon-image {
				width: 48rpx;
				height: 48rpx;
			}
		}
		
		.content-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.content-section {
		padding: 0 24rpx 24rpx;
		
		.rich-content {
			line-height: 1.6;
			color: #333;
			
			:deep(p) {
				margin-bottom: 16rpx;
				font-size: 28rpx;
				line-height: 1.6;
			}
			
			:deep(strong) {
				font-weight: 600;
				color: #333;
			}
			
			:deep(table) {
				width: 100%;
				border-collapse: collapse;
				margin: 16rpx 0;
				
				td, th {
					border: 1px solid #ddd;
					padding: 16rpx;
					text-align: left;
					font-size: 26rpx;
				}
				
				th {
					background: #f5f5f5;
					font-weight: 600;
				}
			}
			
			:deep(ul), :deep(ol) {
				padding-left: 32rpx;
				margin-bottom: 16rpx;
				
				li {
					margin-bottom: 8rpx;
					font-size: 28rpx;
					line-height: 1.5;
				}
			}
		}
	}
	
	.footer-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid #f0f0f0;
		padding: 24rpx;
		z-index: 100;
		
		.action-buttons {
			display: flex;
			gap: 24rpx;
			
			.btn {
				flex: 1;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 500;
				border: none;
				
				&.btn-secondary {
					background: #f5f5f5;
					color: #666;
				}
				
				&.btn-primary {
					background: #007aff;
					color: white;
				}
				
				&.btn-finish {
					background: #007aff;
				}
			}
		}
	}
</style>